<!DOCTYPE html>
<html lang=zh"">
<head>
    <meta charset="UTF-8">
    <title>css盒子模型练习</title>
    <link rel="stylesheet" href="《16》css盒子模型练习.css" type="text/css">
</head>
<body>
    <div class="top">
        <div class="topcenter">顶层中部</div>
    </div>
    <div class="middle">
        <div class="middle1">middle1</div>
        <div class="middle2">middle2</div>
    </div>
    <div class="bottom">
        bottom
    </div>

</body>
</html>

<!--作业
查找display属性 span标签
4.（课外）flex布局。由于盒子模型 定位（绝对、相对），浮动（浮动、清楚浮动，自适应（），在复杂网页中盒子模型存在不好理解不好定义等缺点，css3引入flex流式布局。
============================================================================
display:重点了解的是display属性中的 inline-block 值,而在w3cschool文档中没有写这个值
 display : inline, 此元素会被你现实为内联元素
 display : inline-block ,讲对象呈递为内联对象,旁边的内联对象会被呈递为同一行内,并允许空格;同时它也可以实现浮动布局
display:block  -- 显示为块级元素
display:inline  -- 显示为内联元素
display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
我们常将<ul>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。
=====================================================================
span标签：<span> 用于对文档中的行内元素进行组合。
<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。
<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。（比如对一些特定的文本进行着色或让他进行特殊修改，如作业：定位和浮动.html
-->